<template>
  <view class="link-box">
    <pImage v-if="data.cover" style="width: 100%;" mode="widthFix"  trans-opacity
                           :transition-duration="1"
                           :src="data.cover"
                           placeholder="../../static/default.png"
                           err='../../static/err.jpg'
                           :height="100"
                           :width="100" />
    <view class="box">
      <view class="text">
        <p class="name">{{data.name}}</p>
        <p class="link">{{data.link}}</p>
      </view>
      <view @click="copyText" class="but">copy</view>
    </view>
  </view>
</template>

<script>
  import pImage from '@/components/p-image/index.vue'
  export default {
    components: {
        pImage
      },
    name:"myLink",
    data() {
      return {
        
      };
    },
    props:{
      data:{
        type:Object
      }
    },
    methods:{
      copyText: function () {
          wx.setClipboardData({
            data: this.data.link//需要复制的文本
          })
        }
    }
  }
</script>

<style lang="scss">
.link-box{
  margin: 10px auto;
  border: 1px solid #efefef;
  box-shadow: 0 0 3px 3px #ccc;
  width: 650rpx;
  display: flex;
  border: 5px;
  flex-direction: column;
  padding: 15px;
  .box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .text{
      font-size: 18px;
      .name{
        font-weight: bold;
        color: #000;
        font-style: oblique;
        margin: 2px;
      }
      .link{
        color: #32e1e1;
        font-size: 14px;
        overflow: hidden;
        width: 500rpx;
        word-break: break-all;
        display: -webkit-box;
         -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        margin: 2px;
        text-decoration: underline;
      }
    }
    .but{
      border-radius: 15px;
      position: absolute;
      right: 0px;
      font-size: 14;
      line-height: 100%;
      background-image: linear-gradient( 135deg, #3C8CE7 10%, #00EAFF 100%);;
      padding: 7px;
      color: #fff;
      bottom: 0px;
    }
  }
}
</style>